<template>
	<uni-nav-bar dark :fixed="true" shadow background-color="#fff" status-bar left-icon="left" left-text="" title="收货地址" @clickLeft="back" />
	<view class="main">
		<view class="item" v-for="(item, index) in data.list" :key="index">
			<view class="title">
				<view class="name">{{item.name}}</view>
				<view class="phone">-{{item.mobile}}</view>
			</view>
			<view class="address">{{item.district}}</view>
			<view class="edit">
				<view class="left">
					<view class="cirlce" :style="item.is_default? '':'background-color: gray'" @click="isAddress(item)"></view>设为默认地址
				</view>
				<view class="right">
					<view style="margin-right: 30rpx;" @click="editaddress(item)">编辑</view>
					<view @click="deleteaddress(item)">删除</view>
				</view>
			</view>
		</view>
	</view>
	
	<!-- 新增按钮 -->
	<view class="main-button" @click="addaddress()">
		<text>新增收货地址</text>
	</view>
	
	<view class="pops">
		<nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showBasic">
			<view class="pop">
				<view class="title">操作提示</view>
				<view class="desc">确认删除此地址？</view>
				<view class="btn">
					<view class="item" style="border-right: 4rpx solid #353535;" @click="cancel()">取消</view>
					<view class="item" @click="sure()">确认</view>
				</view>
			</view>
		</nut-popup>
	</view>
</template>

<script setup>
	import { onShow } from "@dcloudio/uni-app"
	import { reactive, ref } from "vue";
	import { addressList, RegionList, deleteregion, isDefalut } from '@/request/api/address.js';
	
	const showBasic = ref(false);
	const data = reactive({
		list: [],
		address: {}
	})
	
	onShow(() => {
		getData();
	})

	
	const getData = async () => {
		try {
			const resultData = await addressList();
			data.list = resultData.data;
		} catch (e) { }
	}
	
	const delect = () => {
		showBasic.value = true;
	}
	
	// 删除地址
	const deleteaddress = (item) => {
		showBasic.value = true;
		data.address = item;
	}
	
	// 默认地址
	const isAddress = async (item) => {
		const paramas = { id: item.id, is_default: item.is_default? 0 : 1 };
		const resultData = await isDefalut(paramas);  // 设置默认
		if (resultData.code == 200) {
			// 其他is_default都设置为0
			for (let i = 0; i < data.list.length; i++) {
				if (data.list[i].id !== item.id) {
					data.list[i].is_default = 0;
				} else {
					data.list[i].is_default = 1;
				}
			}
		}
	}
	
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	
	// 编辑
	const editaddress = (item) => {
		uni.navigateTo({
			url: `/pages/my/addressmanage?data=${JSON.stringify(item)}&type=1`
		})
	}
	
	// 新增
	const addaddress = () => {
		uni.navigateTo({
			url: '/pages/my/addressmanage?type=0'
		})
	}
	
	// 弹窗操作
	const edit = () => {
		showBasic.value = true;
	}
	
	// 取消
	const cancel = () => {
		showBasic.value = false;
	}
	
	// 确认
	const sure = async () => {
		showBasic.value = false;
		try {
			const paramas = { id: data.address.id };
			const resultData = await deleteregion(paramas);
			uni.showToast({ title: resultData.msg, icon: 'none' });
			getData()
		} catch (e) { }
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 0rpx 36rpx;
		padding-bottom: 200rpx;
		box-sizing: border-box;
		.item {
			width: 100%;
			padding: 20rpx 10rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid #E5E4E4;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1C1919;
			line-height: 40rpx;
			.title {
				display: flex;
				align-items: center;
			}
			.edit {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				.left {
					display: flex;
					align-items: center;
					.cirlce {
						display: block;
						width: 28rpx;
						height: 28rpx;
						background-color: #4CBC4E;
						border-radius: 50%;
						margin-right: 18rpx;
					}
					.active {
						background-color: #CBC7BE;
					}
				}
				.right {
					display: flex;
					align-items: center;
				}
			}
		}
	}
	
	.pops ::v-deep .nut-popup {
		background-color: transparent !important;
	}
	
	.pop {
		background: #000000;
		border-radius: 18rpx;
		.title {
			color: #fff;
			text-align: center;
			font-size: 32rpx;
			padding-top: 66rpx;
		}
		.desc {
			text-align: center;
			color: #909090;
			padding: 24rpx 182rpx 68rpx 182rpx;
		}
		.btn {
			display: flex;
			align-items: center;
			justify-content: space-around;
			border: 2rpx solid #353535;
			.item {
				width: 310rpx;
				height: 100rpx;
				color: #fff;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #909090;
				line-height: 100rpx;
				text-align: center;
			}
		}
	}
	
	.main-button {
		position: fixed;
		bottom: 20rpx;
		left: 0;
		right: 0;
		width: 678rpx;
		height: 92rpx;
		margin: 0 auto;
		background-color: #000000;
		border-radius: 100rpx;
		color: #fff;
		font-size: 30rpx;
		line-height: 92rpx;
		text-align: center;
	}
</style>